<template>
  <a-modal
    v-model:visible="show"
    ref="modelRef"
    :width="500"
    hide-title
    modal-class="open-account"
    :footer="false"
    @cancel="show = false"
  >
    <CustomTitle title="请用手机访问" isClose :style="{ color: '#86909C' }" :size="24" @close="show = false" />
    <div class="content">
      <canvas ref="qrcodeCanvas"></canvas>
      <!-- <div ref="qrcode" class="qr-code"></div> -->
      <!-- <img class="qr-code" src="@/assets/images/avatar.png" alt="" /> -->
      <div class="download-wrap">点击<span class="btn" @click="saveCode">下载</span>二维码</div>
      <div class="url">
        <div class="url-test">
          {{ QRcodeUrl }}
        </div>
        <img class="icon" src="@/assets/images/copy.png" @click="handelCopyProductId" />
      </div>
    </div>
  </a-modal>
</template>
<script setup lang="ts">
import { getH5Url } from "@/apis/user/index";
import { Message } from "@arco-design/web-vue";
import { color } from "echarts";
import QRCode from "qrcode";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: true
  }
});

watch(
  () => props.modelValue,
  val => {
    if (val) {
      getH5UrlApi();
    }
  }
);

const emit = defineEmits(["update:modelValue"]);

// 网址
const QRcodeUrl = ref("");

const imgUrl = ref();
const qrcodeCanvas = ref();

const show = computed({
  get: () => props.modelValue,
  set: val => emit("update:modelValue", val)
});
const handelCopyProductId = () => {
  const textarea = document.createElement("textarea");
  textarea.readOnly = true;
  textarea.style.position = "absolute";
  textarea.style.left = "-9999px";
  textarea.value = QRcodeUrl.value;
  document.body?.appendChild(textarea);
  textarea.select();
  document.execCommand("Copy");
  document.body.removeChild(textarea);
  Message.success("复制成功");
};

// 保存二维码
const saveCode = () => {
  const canvas = qrcodeCanvas.value;
  var oA = document.createElement("a");
  oA.download = "qrcode.jpg"; // 设置下载的文件名，默认是'下载'
  oA.href = canvas.toDataURL("image/jpeg");
  document.body.appendChild(oA);
  oA.click();
  oA.remove(); // 下载之后把创建的元素删除
};
// 获取移动端地址
const getH5UrlApi = () => {
  getH5Url().then(res => {
    QRcodeUrl.value = res.msg;
    imgUrl.value = QRCode.toCanvas(
      qrcodeCanvas.value,
      res.msg,
      {
        errorCorrectionLevel: "H", // 高纠错级别，能容忍更多损坏，但会使二维码更复杂
        version: 10, // 选择较高的版本（最大是 40），版本越高能存储的数据越多
        width: 250,
        height: 250,
        colorDark: "#000000",
        colorLight: "#ffffff"
      },
      function (error) {
        if (error) {
          console.error(error);
        } else {
          console.log("二维码生成成功");
        }
      }
    );
  });
};

onMounted(() => {
  getH5UrlApi();
});
</script>
<style scoped lang="scss">
.content {
  margin-top: 51px;
  text-align: center;
  padding-bottom: 20px;
  .qr-code {
    width: 255px;
    height: 255px;
    margin: auto;
  }
  .download-wrap {
    font-size: 16px;
    color: #3d3d3d;
    margin-top: 23px;
    .btn {
      cursor: pointer;
      margin: 0 10px;
      color: #007dff;
      border-bottom: 1px solid #007dff;
    }
  }
  .url {
    margin-top: 20px;
    height: 40px;
    line-height: 40px;
    background: #ffffff;
    border-radius: 4px;
    padding-left: 5px;
    padding-right: 10px;
    border: 1px solid #e1e6ed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .url-test {
      font-size: 16px;
      color: #3d3d3d;
      overflow: hidden; /*内容超出后隐藏*/
      text-overflow: ellipsis; /*超出内容显示为省略号*/
      white-space: nowrap; /*文本不进行换行*/
    }
    .icon {
      cursor: pointer;
      width: 20px;
      height: 20px;
    }
  }
}
</style>
